<template>
  <view class="p-[32rpx] bg-gray-50 min-h-screen">
    <view class="mb-[32rpx]">
      <text class="block text-[32rpx] font-bold mb-[16rpx] text-gray-800">ItemWithImagesCard 组件示例</text>
      <text class="block text-[24rpx] text-gray-500">展示标题、描述、图片的通用卡片组件</text>
    </view>

    <!-- 示例1：基础用法 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例1：基础用法</text>
      <ItemWithImagesCard
        v-model="item1"
        title-label="项目名称"
        title-placeholder="请输入项目名称"
        description-label="项目描述"
        description-placeholder="请输入项目描述"
      />
    </view>

    <!-- 示例2：带删除按钮 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例2：带删除按钮</text>
      <ItemWithImagesCard
        v-model="item2"
        :show-delete="true"
        delete-button-text="移除此项"
        border-color="border-blue-300"
        @delete="handleDelete2"
      />
    </view>

    <!-- 示例3：必填项 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例3：必填项</text>
      <ItemWithImagesCard
        v-model="item3"
        :required="true"
        title-label="任务名称"
        description-label="任务详情"
        border-color="border-red-300"
      />
    </view>

    <!-- 示例4：不显示图片 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例4：不显示图片</text>
      <ItemWithImagesCard
        v-model="item4"
        :show-images="false"
        title-label="备注"
        description-label="详细说明"
      />
    </view>

    <!-- 示例5：自定义行数和最大图片数 -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例5：自定义配置</text>
      <ItemWithImagesCard
        v-model="item5"
        :description-rows="5"
        :max-images="3"
        title-label="详细报告"
        description-label="报告内容"
        images-label="附件图片"
      />
    </view>

    <!-- 示例6：列表形式（多个卡片） -->
    <view class="mb-[48rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">示例6：动态列表</text>
      
      <view v-for="(item, index) in itemList" :key="index" class="mb-[16rpx]">
        <ItemWithImagesCard
          v-model="itemList[index]"
          :show-delete="true"
          :delete-button-text="`删除项目 ${index + 1}`"
          :title-label="`项目 ${index + 1} 名称`"
          border-color="border-purple-300"
          @delete="removeItem(index)"
        />
      </view>
      
      <nut-button 
        type="success" 
        size="normal" 
        block
        class="!rounded-[12rpx]"
        @click="addItem"
      >
        <template #icon>
          <IconFont name="plus" size="16" color="#fff" />
        </template>
        添加新项目
      </nut-button>
    </view>

    <!-- 显示当前数据 -->
    <view class="bg-white rounded-[16rpx] p-[24rpx] mb-[32rpx]">
      <text class="block text-[28rpx] font-bold mb-[16rpx] text-gray-700">当前数据（JSON）：</text>
      <view class="bg-gray-50 p-[16rpx] rounded-[8rpx]">
        <text class="text-[20rpx] text-gray-600 font-mono">{{ JSON.stringify({ item1, item2, item3, item4, item5, itemList }, null, 2) }}</text>
      </view>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import ItemWithImagesCard, { type ItemData } from './ItemWithImagesCard.vue'
import { IconFont } from '@nutui/icons-vue-taro'
import Taro from '@tarojs/taro'

// 示例数据
const item1 = ref<ItemData>({
  title: '体格检查',
  description: '患者体温正常，血压稳定',
  images: []
})

const item2 = ref<ItemData>({
  title: '生理功能评估',
  description: '心肺功能良好，无异常',
  images: []
})

const item3 = ref<ItemData>({
  title: '',
  description: '',
  images: []
})

const item4 = ref<ItemData>({
  title: '医生建议',
  description: '注意休息，按时服药',
  images: []
})

const item5 = ref<ItemData>({
  title: '检查报告',
  description: '血常规检查报告...',
  images: []
})

// 列表数据
const itemList = ref<ItemData[]>([
  {
    title: '项目一',
    description: '这是第一个项目的描述',
    images: []
  },
  {
    title: '项目二',
    description: '这是第二个项目的描述',
    images: []
  }
])

// 删除处理
const handleDelete2 = () => {
  Taro.showModal({
    title: '确认删除',
    content: '确定要删除此项吗？',
    success: (res) => {
      if (res.confirm) {
        // 重置数据
        item2.value = {
          title: '',
          description: '',
          images: []
        }
        Taro.showToast({
          title: '已删除',
          icon: 'success'
        })
      }
    }
  })
}

// 添加项目
const addItem = () => {
  itemList.value.push({
    title: '',
    description: '',
    images: []
  })
}

// 移除项目
const removeItem = (index: number) => {
  Taro.showModal({
    title: '确认删除',
    content: `确定要删除项目 ${index + 1} 吗？`,
    success: (res) => {
      if (res.confirm) {
        itemList.value.splice(index, 1)
        Taro.showToast({
          title: '已删除',
          icon: 'success'
        })
      }
    }
  })
}
</script>

<style scoped lang="scss">
// 额外样式
</style>

